<!--
 * @Author: your name
 * @Date: 2021-09-24 13:48:19
 * @LastEditTime: 2021-09-24 14:11:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\components\recursionTab.vue
-->
<template>
  <el-tabs
    v-model="tabActive"
    tab-position="top"
    @tab-click="tabChildrenClick"
  >
    <el-tab-pane v-for="(tabItem, tabIndex) in list" :label="tabItem.label" :name="tabItem.tabId" :key="tabIndex">
      <template v-if="tabItem.children && tabActive == tabItem.tabId">
        <recursionTab :list="tabItem.children" :active="tabItem.children[0].tabId" @activeChange="activeChange" />
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'RecursionTab',
  props: {
    list: {
      type: Array,
      default: () => {}
    },
    active: {
      type: [String, Number],
      default: () => {}
    }
  },
  data () {
    return {
      tabActive: '',
      listObj: {}
    }
  },
  watch: {
    active (val) {
      this.tabActive = val
    }
  },
  mounted () {
    this.tabActive = this.active
    const listObj = {}
    for (const item of this.list) {
      listObj[item.tabId] = item
    }
    this.listObj = listObj
    this.$emit('activeChange', this.tabActive)
  },
  methods: {
    getFirstId (list) {
      // console.log(list[0], 'list[0].children')
      if (list[0].children) {
        return this.getFirstId(list[0].children)
      } else {
        return list[0].fileCategoryId
      }
    },
    tabChildrenClick (val) {
      let active; const children = this.listObj[val.name].children
      // console.log('tabChildrenClick', children)
      if (children) {
        active = this.getFirstId(children)
      } else {
        active = val.name
      }
      this.$emit('activeChange', active)
    },
    activeChange (val) {
      // console.log(val, 'activeChange~~~~~')
      this.$emit('activeChange', val)
    }
  }
}
</script>
